<template>
	<div class="out_box2">
		<ul>
			<li v-for="val,index in imgList" :key="index" class="li_list"><img :src="val" class="img_list"></li>
		</ul>
		<div class="but_box">
			<img src="@/assets/images/右箭头.png" class="left_but">
			<img src="@/assets/images/右箭头.png" class="right_but">
		</div>
		<div class="point_box">
			<p class="point_val"></p>
			<p class="point_val"></p>
			<p class="point_val"></p>
			<p class="point_val"></p>
		</div>
	</div>
	
</template>
<script>
	class Banner extends BaseBanner{  //?
		constructor(dom,option) {
			super(dom,option)
			this.bindEvent()
			this.autoPlay()
			this.stopMove()
		}

		bindEvent(){
			document.addEventListener('keydown',(e)=>{
				if(e.keyCode == constants.LEFT_KEY_CODE){
					this.preIndex()
				}else if(e.keyCode == constants.RIGHT_KEY_CODE){
					this.nextIndex()
				}
			})
		}

	}


	const DEFAULT_PARAM = {
		width: 1000,
		height: 600,
		speed: 0.5,
		moveDx: 1000,
		imgList: [],
		isAutoPlay: true,
		timeSpace:2,
		bannerType:constants.SLIDER_TYPE.SLIDER
	}

	class BaseBanner {
		// 构造函数用来构造对象（轮播图）
		constructor(dom, option) {
			this.dom = dom;
			// 解构赋值
			this.option = {
				...DEFAULT_PARAM,
				...option
			};
			this.option.width = this.dom.offsetWidth
			this.option.height = this.dom.offsetHeight
			this.option.moveDx = this.option.width

			// 轮播图当前的图片索引
			this.currentIndex = 0;
			this.ulDom = document.createElement('ul')
			// lilist,用来存放所有的li标签包括img
			this.liList = [];
			// 指示点的domlist
			this.pList = [];
			//定时器
			this.timer = undefined;

			this.imgLength = this.option.imgList.length + 1;

			this.init()
			// 自动轮播的处理
			// if(this.option.isAutoPlay){
			// 	this.autoPlay()
			// }
		}


		// 淡入淡出的切换方法
		changeImg(index){
			if(index < 0){
				index = this.liList.length-1
			}
			if(index >= this.liList.length){
				index = 0
			}
			this.currentIndex = index
			for(let i = 0;i<this.liList.length;i++ ){
				if(i=== this.currentIndex){
					this.liList[i].style.opacity = 1;
					this.pList[i].className = 'point_val choosed'
					continue
				}
				this.liList[i].style.opacity = 0;
				this.pList[i].className = 'point_val'
			}
		}

		// 处理收尾滑动问题
		dealIndex(index){
			const that = this;
			if(index <= 0){
				index = this.imgLength -1
				this.ulDom.style.transition = 'none'
				this.imgMove(index)
				setTimeout(function(){
					that.ulDom.style.transition = `all ${that.option.speed}s linear 0s`
					that.imgMove(index-1)
				},1)
			}else if(index >= this.imgLength){
				index = 0;
				this.ulDom.style.transition = 'none'
				this.imgMove(index)
				setTimeout(function(){
					that.ulDom.style.transition = `all ${that.option.speed}s linear 0s`
					that.imgMove(index+1)
				},0)
			}else{
				this.imgMove(index)
			}
		}

		// 翻页的方法
		imgMove(index) {
			const moveWidth = index * -this.option.width
			this.ulDom.style.left = moveWidth + 'px'
			this.currentIndex = index;
			//处理指示点的状态
			for(let i = 0;i<this.liList.length;i++ ){
				const x = this.currentIndex == this.option.imgList.length ?0:this.currentIndex
				if(i=== this.currentIndex){
					this.pList[i].className = 'point_val choosed'
					continue
				}
				this.pList[i].className = 'point_val'
			}
		}

		//鼠标移进移出停止自动轮播
		stopMove(){
			this.dom.onmouseover = ()=>{
				this.timer = clearInterval(this.timer)
			}
			this.dom.onmouseout = ()=>{
				this.autoPlay()
			}
		}


		// 上一页的方法
		preIndex() {
			this.toChangeImg(this.currentIndex - 1)
		}

		// 下一页的方法
		nextIndex() {
			this.toChangeImg(this.currentIndex + 1)
		}

		toChangeImg(page){
			switch (this.option.bannerType){
				case constants.SLIDER_TYPE.SLIDER:
					this.dealIndex(page)
					break;
				case constants.SLIDER_TYPE.FADE_IN:
					this.changeImg(page)
					break;
			}
		}

		// 自动翻页的方法
		autoPlay() {
			//if(!isNaN(this.option.timeSpace)){
				// if(this.option.timeSpace < 1){
				// 	this.option.timeSpace = 1
				// }else if(this.option.timeSpace > 5){
				// 	this.option.timeSpace = 5
				// }
				this.timer = setInterval(()=>{
					this.nextIndex()
				},this.option.timeSpace*1000 + this.option.speed * 1000)
			// }
		}

	}

	export default {
		data() {
			return {
				imgList: [
					`https://img2.baidu.com/it/u=3456583680,520701261&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500`,
					`https://img2.baidu.com/it/u=1349848593,1896883413&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800`,
					`https://img0.baidu.com/it/u=2020083015,685250494&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500`,
					`https://img2.baidu.com/it/u=923478948,106462584&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281`,
					`https://img1.baidu.com/it/u=2404815322,981417940&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313`
				],
				speed: 1,
				isAutoPlay: true,
				timeSpace: 1,
			}
		}
	}
</script>
<style>
	@import url('../../public/pubic.scss');

	.out_box2 {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		z-index: -1;
		margin: -60px auto;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.li_list {
		width: 100%;
		height: 100%;
	}

	.but_box{
		width: 100%;
		height: 100px;
		position: absolute;
		top: 50%;
		margin-top: -50px;
		left: 0px;
		display: flex;
		justify-content: space-between;
	}
	.left_but{
		transform: rotate(180deg);
	}
	.left_but,.right_but{
		width: 50px;
		height: 50px;
	}
	.point_box{
		width: 120px;
		height: 100px;
		background-color: black;
		position: absolute;
		bottom: 0px;
		left: 50px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.point_val{
		width: 8px;
		height: 8px;
		border: 1px solid rgba(0,0,0,.05);
		border-radius: 50%;
		background: rgba(255,255,255,.4);
	}
	.choosed{
		width: 10px;
		height: 10px;
		border: 3px solid rgba(0,0,0,.1);
		background: #ffffff;
	}
	
</style>